import Counter from "../../mobx-store/index";
import {observer} from 'mobx-react-lite'
import {Button, InputNumber, Modal} from "antd";
import "highlight.js/styles/atom-one-light.css"
import React, {useEffect, useState} from "react";
import MdEditor from "../../utils/md-editor";
import {getDetail} from "./api";

require('./index.css')


const Content = () => {
    const [mdContent, setMdContent] = useState<string>('')
    const [title, setTitle] = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [height, setHeight] = useState(700)
    /**
     *  处理输入变化的回调函数
     * @param e 输入的值
     */
    const handleInputChange = (e: any) => {
        setHeight(e)
    };
    /**
     * 保存设置
     */
    const handleOk = () => {
        setHeight(height)
        setIsModalOpen(false);
    };
    /**
     * /关闭弹窗
     */
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    /**
     * 获取文章内容
     */
    const getContent = async () => {
        setTitle(Counter.getTitle())
        //这样做的目的是刷新页面的缓存
        const res = await getDetail(Counter.url+"?Time="+ (Math.random() * 100) + 1)
        setMdContent(res)
    }
    /**
     * 渲染内容
     */
    useEffect(() => {
        if (Counter.url) {
            getContent().catch(err => console.error(err))
        }
    }, [Counter.url, mdContent, title])


    return (
        <>
            <div style={{fontStyle: "black"}}>
                <div className={'top'}>
                    <div>
                        正在操作：<a>{title ? title : null}</a>
                    </div>
                    <div>
                        {/*调整展示样式*/}
                        <Button onClick={() => setIsModalOpen(true)}>调整显示的高度</Button>
                    </div>
                </div>
                {isModalOpen &&
                    <Modal title="Basic Modal"
                           okText={'保存设置'}
                           open={isModalOpen}
                           onOk={handleOk}
                           onCancel={handleCancel}>
                        <InputNumber
                            style={{width: '100%'}}
                            size="large"
                            min={700} max={1000}
                            placeholder={'调整显示的高度'}
                            value={height}
                            onChange={handleInputChange}/>
                    </Modal>}
                <br/>
                <MdEditor contents={mdContent} height={height}/>
            </div>
        </>
    )
}
export default observer(Content)
